<template>
  <div
    class="title-bar"
    :class="sidebarVisible ? 'side-bar-show' : ''"
    :style="{ width: expandState ? '' : '510px' }"
  >
    <div class="title-bar-left">
      <img src="~@/assets/bar/logo.svg" alt="图标" class="icon" />
      <div class="title">AI Tools</div>
    </div>
    <div class="title-bar-right">
      <div class="right-btn-panel">
        <div class="operating-button close-button" @click="closeWindow">
          <img src="~@/assets/bar/close.svg" />
        </div>
        <div class="operating-button minimum-button" @click="minimumWindow">
          <img src="~@/assets/bar/minimum.svg" />
        </div>
        <div v-if="expandState" class="operating-button expand-button" @click="expandWindow">
          <img src="~@/assets/bar/expand.svg" />
        </div>
        <div style="width: 10px"></div>
      </div>
    </div>
  </div>
</template>

<script>
import emitter from '@/utils/eventBus'

export default {
  name: 'TitleBar',
  data() {
    return {
      expandState: false,
      sidebarVisible: true
    }
  },
  mounted() {
    this.expandState = !(this.$route.path === '/' || this.$route.path === '/login')
    emitter.on('toggle-sidebar', this.handleSidebarToggle)
  },
  methods: {
    handleSidebarToggle(sidebarVisible) {
      this.sidebarVisible = sidebarVisible
    },
    closeWindow() {
      window.close() // 关闭窗口
    },
    minimumWindow() {
      window.ipcRenderer.send('minimizing')
    },
    expandWindow() {
      window.ipcRenderer.send('expandWindow', {
        screenWidth: window.screen.width,
        screenHeight: window.screen.height
      })
    }
  }
}
</script>

<style scoped>
@import './index.css';
</style>
